<template>
  <div class="indexall">
    <el-container class="all">
      <el-aside width="80px"><the-nav></the-nav></el-aside>
      <el-container>
        <el-header class="allheader">
          <the-header> </the-header>
        </el-header>
        <el-main>
          <div class="main">
            <el-container class="block">
              <el-header height="50%" class="blocktop">
                <el-container>
                  <el-aside width="18%" style="text-align: center">
                    <el-avatar
                      style="margin: 6%"
                      :size="150"
                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                      @clik="changeAvatar()"
                    />
                    <text style="font-size: 20px">点击修改头像</text></el-aside
                  >
                  <el-main
                    ><div class="userinfo">
                      <span class="username">用户名:{{}}</span>
                      <span class="userid">id: {{}}</span>
                      <span class="email">邮箱:{{}}</span>
                      <span class="fans">粉丝数: {{}}</span>
                      <span class="follows">关注数: {{}}</span>
                    </div>
                    <base-button class="btn1" @click="visibleP = true"
                      >修改个人信息</base-button
                    >
                    <el-dialog v-model="visibleP" :show-close="false">
                      <template #header="{ close, titleId, titleClass }">
                        <div class="my-header">
                          <h4 :id="titleId" :class="titleClass">
                            请输入你需要修改的信息
                          </h4>
                          <el-form>
                            <el-form-item label="用户名">
                              <el-input v-model="userInfo.username"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱名">
                              <el-input v-model="userInfo.email"></el-input>
                            </el-form-item>
                            <el-form-item>
                              <el-button
                                type="primary"
                                @click="updateInfo"
                                style="margin-left: 85%"
                              >
                                更新信息
                              </el-button>
                            </el-form-item>
                          </el-form>
                          <el-button
                            type="danger"
                            @click="close"
                            style="margin-left: 85%"
                          >
                            <el-icon class="el-icon--left"
                              ><CircleCloseFilled
                            /></el-icon>
                            Close
                          </el-button>
                        </div>
                      </template>
                    </el-dialog></el-main
                  >
                </el-container>
              </el-header>
              <el-main height="50%" class="blockbottom">
                <text class="personal">个人简介：</text>
                <textarea class="textarea">{{}}</textarea
                ><!--个人简介区-->
                <base-button class="btn" @click="visibleN = true"
                  >修改</base-button
                ><el-dialog v-model="visibleN" :show-close="false">
                  <template #header="{ close, titleId, titleClass }">
                    <div class="my-header">
                      <h4 :id="titleId" :class="titleClass">
                        请输入你需要修改的信息
                      </h4>
                      <el-form>
                        <el-form-item label="简介信息">
                          <el-input
                            v-model="userInfo.userpost"
                            :rows="5"
                            type="textarea"
                            resize="none"
                            placeholder="Please input"
                          ></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button
                            type="primary"
                            @click="updatePost"
                            style="margin-left: 85%"
                          >
                            更新信息
                          </el-button>
                        </el-form-item>
                      </el-form>
                      <el-button
                        type="danger"
                        @click="close"
                        style="margin-left: 85%"
                      >
                        <el-icon class="el-icon--left"
                          ><CircleCloseFilled
                        /></el-icon>
                        Close
                      </el-button>
                    </div>
                  </template>
                </el-dialog></el-main
              >
            </el-container>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const visibleP = ref(false); //个人信息对话框关闭
    const visibleN = ref(false); //个人简介对话框关闭
    const userInfo = ref({
      username: "",
      email: "",
      userpost: "",
    });
    const postList = ref(null);
    const id = localStorage.getItem("id");
    async function fetchUserInfo() {
      // 获取用户信息
    }
    async function fetchBlogList() {
      // 获取博客列表
    }
    async function updateInfo() {
      // 更新用户信息
    }
    async function updatePost() {
      // 更新用户简介
    }
    return {
      visibleN,
      visibleP,
      id,
      userInfo,
      postList,
      fetchUserInfo,
      fetchBlogList,
      updateInfo,
      updatePost,
    };
  },
};
</script>

<style scoped>
/* 头部样式 */
#app,
html,
.indexall,
.all {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.el-aside {
  height: 100%;
}
/* 头部样式 */
.allheader {
  display: flex; /* 弹性布局 */
  flex-shrink: 0;
  position: absolute;
  line-height: 50px;
  top: 0px;
  right: 0px;
  height: 49px;
  width: 100%;
  background-color: #2d3a4b;
  z-index: 1;
}

/* 主区域 */
.main {
  position: absolute;
  height: 100%;
  top: 50px;
  left: 80px;
  right: 0px;
  padding: 0px;
  margin-right: 0px;
  /* overflow-y: auto;  */
  /* background-color: red; */
}

.block {
  display: flex;
  position: relative;
  border: green solid 1px; /* 边框 */
  margin: 3%;
  height: 70%;
  border-radius: 5px;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);
}

.blocktop {
  position: relative;
  display: flex;
  padding: 1%;
  border: green solid 1px; /* 边框 */
  margin: 1%;
  border-radius: 5px;
}
.blockbottom {
  text-align: top;
  position: relative;
  display: flex;
  padding: 1%;
  border: green solid 1px; /* 边框 */
  margin: 3%;
  border-radius: 5px;
}

.textarea {
  width: 80%;
  height: 80%;
  border: 0px;
  top: 0px;
  resize: none;
  outline: none;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  padding: 1%;
  margin: 1%;
}

.userinfo {
  display: flex;
  flex-direction: column;
  margin-left: 0%;
  margin-top: 0%;
  font-size: 20px;
  align-items: flex-start;
}

.personal {
  font-size: 20px;
}

.username {
  font-weight: bold;
  padding-bottom: 1%;
}

.userid {
  padding-bottom: 1%;
}

.email {
  padding-bottom: 2%;
}

.fans {
  color: salmon;
  font-size: 25px;
  padding-bottom: 2%;
}

.follows {
  color: salmon;
  font-size: 25px;
  padding-bottom: 2%;
}
.blockbottom {
  position: relative;
  display: flex;
  padding: 1%;
  border: green solid 1px; /* 边框 */
  margin: 5%;

  border-radius: 5px;
}
.btn1 {
  position: absolute;
  right: 10px;
  top: 200px;
  margin: 10px;
  padding: 0px;
  font-size: 15px;
  font-weight: bold;
  border: 0px;
}

.btn {
  position: absolute;
  right: 0px;
  bottom: 0px;
  margin: 10px;
  padding: 0px;
  width: 50px;
  height: 30px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: bold;
  border: 0px;
}
</style>
